<!-- Dom模板 -->
<template>
  <div class="box">
    <!-- Dom内容 -->
    <!-- 搜索框 -->
    <div class="ssk">
      <!-- 扫码 -->
      <div class="ssm">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-saoma"></use>
        </svg>
      </div>
      <!-- 搜索框 -->
      <div class="sss" @click="sssk">
        <svg class="icon" aria-hidden="true" id="sssss">
          <use xlink:href="#icon-sousuo"></use>
        </svg>
        <span>搜索好物</span>
      </div>
      <!-- 消息 -->
      <div class="sxx" @click="sxxs">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-xiaoxi-"></use>
        </svg>
      </div>
    </div>

    <!-- 轮播图 -->
    <div>
      <van-swipe :autoplay="2500" indicator-color="rgb(9, 9, 8)">
        <van-swipe-item v-for="(item, index) in data.banners" :key="index">
          <img class="imgds" :src="item.img" />
        </van-swipe-item>
      </van-swipe>
    </div>

    <!-- 导航图标 -->
    <div class="dhls">
      <div class="bdhk1">
        <svg class="icon" aria-hidden="true" id="bdhk1">
          <use xlink:href="#icon-dianzan"></use>
        </svg>
        <p class="pdhlss">新品推荐</p>
      </div>
      <div class="bdhk2">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-isometricfenggetubiaosheji-"></use>
        </svg>
        <p class="pdhls">必买清单</p>
      </div>
      <div class="bdhk3">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-huoqing-"></use>
        </svg>
        <p class="pdhls">热销榜</p>
      </div>
      <div class="bdhk4">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-icon_hangyefenlei"></use>
        </svg>
        <p class="pdhls">全部</p>
      </div>
    </div>

    <!-- 限时抢购 -->
    <div class="ssqg">
      <h5 class="ssqgh">限时抢</h5>
      <!-- 倒计时 -->
      <div class="dsdsdse">
        <van-count-down :time="time">
          <template #default="timeData">
            <span class="block">{{ timeData.hours }}</span>
            <span class="colon">:</span>
            <span class="block">{{ timeData.minutes }}</span>
            <span class="colon">:</span>
            <span class="block">{{ timeData.seconds }}</span>
          </template>
        </van-count-down>
      </div>
      <div class="dssd">
        <!-- 轮播图 -->
        <van-swipe :autoplay="3000" indicator-color="rgba(255, 255, 255, 0)">
          <!-- 宫格图表 一 -->
          <van-swipe-item>
            <van-grid
              :column-num="4"
              :border="false"
              icon-size="4.2rem"
              :clickable="true"
            >
              <van-grid-item
                v-for="(item, index) in data.xianshi"
                :key="index"
                :icon="item.img"
                :text='`${"¥"}`+item.price'
              />
            </van-grid>
          </van-swipe-item>
          <van-swipe-item>
            <van-grid
              :column-num="4"
              :border="false"
              icon-size="4.2rem"
              :clickable="true"
            >
              <van-grid-item
                v-for="(item, index) in data.xianshi"
                :key="index"
                :icon="item.img"
                :text='`${"¥"}` +item.price'
              />
            </van-grid>
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>

    <!-- 商品一 -->
    <div class="spy">
      <img
        id="imgss"
        src="https://cdn.jsdelivr.net/gh/1144822958/cdn/image/lb1.png"
      />
      <!-- 左侧大图商品 -->
      <div class="spdsy">
        <img
          class="dspd"
          src="https://cdn.jsdelivr.net/gh/1144822958/cdn/image/image-20211012135516612.png"
        />
        <span class="spansds">PINKO 春季纯色休闲外套</span>
        <p class="span2">¥ 193.00</p>
      </div>
      <!-- 右侧商品列表 -->
      <div class="dsplb">
        <div class="spgg">
          <img
            class="imgss"
            src="https://cdn.jsdelivr.net/gh/1144822958/cdn/image/image-20211012135542361.png"
            alt=""
          />
          <span class="spansds">PINKO 春季纯色休闲外套</span>
          <p class="span2">¥ 193.00</p>
        </div>

        <div class="spgg">
          <img
            class="imgss"
            src="https://cdn.jsdelivr.net/gh/1144822958/cdn/image/image-20211012135606022.png"
            alt=""
          />
          <span class="spansds">PINKO 春季纯色休闲外套</span>
          <p class="span2">¥ 193.00</p>
        </div>

        <div class="spgg">
          <img
            class="imgss"
            src="https://cdn.jsdelivr.net/gh/1144822958/cdn/image/image-20211012135629012.png"
            alt=""
          />
          <span class="spansds">PINKO 春季纯色休闲外套</span>
          <p class="span2">¥ 193.00</p>
        </div>

        <div class="spgg">
          <img
            class="imgss"
            src="https://cdn.jsdelivr.net/gh/1144822958/cdn/image/image-20211012143636564.png"
            alt=""
          />
          <span class="spansds">PINKO 春季纯色休闲外套</span>
          <p class="span2">¥ 193.00</p>
        </div>
        <div class="spgg">
          <img
            class="imgss"
            src="https://cdn.jsdelivr.net/gh/1144822958/cdn/image/image-20211012135720560.png"
            alt=""
          />
          <span class="spansds">PINKO 春季纯色休闲外套</span>
          <p class="span2">¥ 193.00</p>
        </div>
        <div class="spgg">
          <img
            class="imgss"
            src="https://cdn.jsdelivr.net/gh/1144822958/cdn/image/image-20211012135745856.png"
            alt=""
          />
          <span class="spansds">PINKO 春季纯色休闲外套</span>
          <p class="span2">¥ 193.00</p>
        </div>
      </div>
    </div>

    <!-- 商品二 -->
    <div class="spy">
      <img
        id="imgss"
        src="https://cdn.jsdelivr.net/gh/1144822958/cdn/image/image-20211012135831711.png"
      />
      <!-- 左侧大图商品 -->
      <div class="spdsy">
        <img
          class="dspd"
          src="https://cdn.jsdelivr.net/gh/1144822958/cdn/image/image-20211012135516612.png"
        />
        <span class="spansds">PINKO 春季纯色休闲外套</span>
        <p class="span2">¥ 193.00</p>
      </div>
      <!-- 右侧商品列表 -->
      <div class="dsplb">
        <div class="spgg">
          <img
            class="imgss"
            src="https://cdn.jsdelivr.net/gh/1144822958/cdn/image/image-20211012135542361.png"
            alt=""
          />
          <span class="spansds">PINKO 春季纯色休闲外套</span>
          <p class="span2">¥ 193.00</p>
        </div>

        <div class="spgg">
          <img
            class="imgss"
            src="https://cdn.jsdelivr.net/gh/1144822958/cdn/image/image-20211012135606022.png"
            alt=""
          />
          <span class="spansds">PINKO 春季纯色休闲外套</span>
          <p class="span2">¥ 193.00</p>
        </div>

        <div class="spgg">
          <img
            class="imgss"
            src="https://cdn.jsdelivr.net/gh/1144822958/cdn/image/image-20211012135629012.png"
            alt=""
          />
          <span class="spansds">PINKO 春季纯色休闲外套</span>
          <p class="span2">¥ 193.00</p>
        </div>

        <div class="spgg">
          <img
            class="imgss"
            src="https://cdn.jsdelivr.net/gh/1144822958/cdn/image/image-20211012143636564.png"
            alt=""
          />
          <span class="spansds">PINKO 春季纯色休闲外套</span>
          <p class="span2">¥ 193.00</p>
        </div>
        <div class="spgg">
          <img
            class="imgss"
            src="https://cdn.jsdelivr.net/gh/1144822958/cdn/image/image-20211012135720560.png"
            alt=""
          />
          <span class="spansds">PINKO 春季纯色休闲外套</span>
          <p class="span2">¥ 193.00</p>
        </div>
        <div class="spgg">
          <img
            class="imgss"
            src="https://cdn.jsdelivr.net/gh/1144822958/cdn/image/image-20211012135745856.png"
            alt=""
          />
          <span class="spansds">PINKO 春季纯色休闲外套</span>
          <p class="span2">¥ 193.00</p>
        </div>
      </div>
    </div>

    <!-- 新品推荐 -->
    <div class="xptj">
      <!-- 新品推荐头部 -->
      <h2 class="xptjh2">新品推荐</h2>
      <span class="xptjspan">&gt;</span>

      <!-- 六宫格 -->
      <div class="">
        <div class="spggs" v-for="(item,index) in data.xinpin" :key="index">
          <img
            class="imgssss"
            :src="item.img"
          />
          <div class="overdi">
          <span class="spansds">{{item.goods_name}}</span>
          </div>
          <p class="span2">¥ {{item.price}}</p>
        </div>

       
      </div>
    </div>

    <!-- 猜你喜欢 -->
    <div class="xptj2">
      <!-- 猜你喜欢头部 -->
      <h2 class="xptjh3">猜你喜欢</h2>

      <!-- 四宫格 -->
      <div>
        <div class="spggsx" v-for="(item,index) in data.xihuan" :key="index">
          <img
            class="imgs4"
            :src="item.img"
          />
          <div class="overdi">
          <span class="spansds">{{item.goods_name}}</span>
          </div>
          <p class="span2">¥ {{item.price}}</p>
        </div>
      </div>
    </div>

    <!-- 空盒子 -->
    <div class="dsdsk">
      <h6>到底了 ↖(▔＾▔)↗</h6>
    </div>
  </div>
</template>
<script>
// import a from ''; // 引入组件
import * as api from "../../components/api/home";
import "../../components/font_icon/iconfont.js";
export default {
  components: {},
  name: "",
  data() {
    return {
      msg: "测试",
      time: 2 * 60 * 60 * 1000,
      data: [],
    };
  },

  // 监听属性
  computed: {},
  // 生命周期 - 创建完成（访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（访问DOM元素）
  async mounted() {
    console.log("-----------");
    let res = await api.homeData();
    console.log(res);
    this.data = res.data;
  },
  // Vue方法定义
  methods: {
    sxxs() {
      this.$router.push({ name: "town" });
    },
    sssk() {
      this.$router.push({ path: "/fenClass", query: { type: true } });
    },
  },
};
</script>
<style lang='less' scoped>
/* @import url(''); 引入css类 */
@import url("./index.css");

.colon {
  display: inline-block;
  // margin: 0 4px;
  color: #ee0a24;
}
.block {
  display: inline-block;
  width: 22px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background-color: #ee0a24;
}
</style>